<template>
  <m-layout>
    <mt-header slot="header" title="教练信息">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section class="teachers" v-if="teacherList && teacherList.length">
        <ul class="teachers-list">
          <li v-for="(teacher, index) in teacherList" :key="index" @click="handleChooseTeacher(teacher, index)">
            <div class="avatar" :class="{active: teacherIndex===index}">
              <e-avatar class="avatar-min" :src="teacher.photo"></e-avatar>
            </div>
            <div class="des small">{{teacherStore.roleType[teacher.roleType]}}</div>
          </li>
        </ul>
      </m-section>
      <m-section class="teacer-info">
        <m-flexbox class="teacer-info-item" justify="space-between">
          <e-avatar class="avatar" :src="curTeacherInfo.photo"></e-avatar>
          <div>{{curTeacherInfo.name}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">性别</div>
          <div class="value">{{curTeacherInfo.sex===1?'男':(curTeacherInfo.sex===2?'女':'保密')}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">国籍</div>
          <div class="value">{{curTeacherInfo.country || '暂无'}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">年龄</div>
          <div class="value">{{curTeacherInfo.age || '暂无'}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">证书</div>
          <div class="value">{{curTeacherInfo.certificateName || '暂无'}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">机构认证</div>
          <div class="value text-ellipsis">{{curTeacherInfo.orgAuthority || '暂无'}}</div>
        </m-flexbox>
        <m-flexbox class="teacer-info-item" justify="space-between">
          <div class="weak">执教年限</div>
          <div class="value">{{curTeacherInfo.teachYear ? curTeacherInfo.teachYear + '年' : '暂无'}}</div>
        </m-flexbox>
        <div class="intro small" v-if="curTeacherInfo.intro">
          <p class="intro-title weak">教练简介</p>
          <div>{{curTeacherInfo.intro}}</div>
        </div>
      </m-section>
    </div>
  </m-layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      teacherList: state => state.smartCourse.teacherList
    })
  },
  data () {
    return {
      teacherStore: {
        roleType: ['主教练', '助理教练', '课程顾问'],
        defaultAvatar: ''
      },
      curTeacherInfo: {},
      teacherIndex: 0
    }
  },
  created () {
    this.teacherListReq()
  },
  methods: {
    teacherListReq () {
      this.$store.dispatch('smartCourse/classTeacherInfo', {
        classId: this.$route.query.classId
      }).then(() => {
        this.curTeacherInfo = this.teacherList[0]
      })
    },
    handleChooseTeacher (teacher, index) {
      this.teacherIndex = index
      this.curTeacherInfo = this.teacherList[index]
    }
  }
}
</script>
<style lang="scss" scoped>
.teacer-info{
  .intro{
    padding: 0.4rem;
  }
  .teacer-info-item{
    padding: 0.3rem;
    .value{
      width: 70%;
      text-align: right;
    }
    .avatar{
      width: 1rem;
      height: 1rem;
    }
  }
}
.teachers{
  overflow-x: scroll;
  white-space: nowrap;
  padding: .24rem .15rem .16rem .15rem;
  li{
    display: inline-block;
    background: #fff;
    margin-left: .15rem;
    margin-right: .15rem;
    text-align: center;
    .avatar{
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      &.active{
        box-sizing: border-box;
        padding: .02rem;
        border: .03rem solid $color-primary;
        border-radius: 50%;
      }
      .avatar-min{
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .des{
      margin-top: .16rem;
    }
  }
}
</style>
